import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Pagination } from '../components/Pagination';
import { FilterTabs } from '../components/FilterTabs';
import { usePageTitle } from '../hooks/usePageTitle';
import { ImageWithLoader } from '../components/ImageWithLoader';

export function Climate() {
  usePageTitle('Climate Control Appliances');
  
  const [currentPage, setCurrentPage] = useState(1);
  const [activeCategory, setActiveCategory] = useState('All Products');
  const categories = ['All Products', 'Air Purifiers', 'Thermostats', 'Air Conditioners', 'Humidifiers'];
  const allProducts = [{
    id: 'climate-1',
    name: 'Dyson Pure Cool TP07 Air Purifier',
    image: 'https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    category: 'Air Purifiers',
    description: 'Exceptional filtration with detailed air quality monitoring and voice control.',
    price: '$649'
  }, {
    id: 'climate-2',
    name: 'Ecobee Smart Thermostat Premium',
    image: 'https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Thermostats',
    description: 'AI-powered climate control with room sensors for optimal comfort.',
    price: '$249'
  }, {
    id: 'climate-3',
    name: 'Mitsubishi Electric Split System AC',
    image: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    category: 'Air Conditioners',
    description: 'Whisper-quiet operation with advanced filtration and energy efficiency.',
    price: '$1,899'
  }, {
    id: 'climate-4',
    name: 'Molekule Air Pro Purifier',
    image: 'https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Air Purifiers',
    description: 'PECO technology destroys pollutants at a molecular level for cleaner air.',
    price: '$999'
  }, {
    id: 'climate-5',
    name: 'Nest Learning Thermostat',
    image: 'https://images.unsplash.com/photo-1545259741-2ea3ebf61fa0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Thermostats',
    description: 'Self-learning capabilities that adapt to your schedule for optimal efficiency.',
    price: '$249'
  }, {
    id: 'climate-6',
    name: 'Daikin Multi-Zone Mini Split',
    image: 'https://images.unsplash.com/photo-1624811533744-f85d5325d49c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    category: 'Air Conditioners',
    description: 'Individual zone control with inverter technology for maximum efficiency.',
    price: '$2,499'
  }, {
    id: 'climate-7',
    name: 'Levoit Core 400S Air Purifier',
    image: 'https://images.unsplash.com/photo-1594142243342-41d20b96e928?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    category: 'Air Purifiers',
    description: 'H13 True HEPA filter with app control and air quality monitoring.',
    price: '$219'
  }, {
    id: 'climate-8',
    name: 'Honeywell Smart Evaporative Humidifier',
    image: 'https://images.unsplash.com/photo-1584464491033-06628f3a6b7b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Humidifiers',
    description: 'Auto humidity control with antimicrobial design and smart home integration.',
    price: '$179'
  }];
  // Filter products by category
  const filteredProducts = activeCategory === 'All Products' ? allProducts : allProducts.filter(product => product.category === activeCategory);
  // Pagination logic
  const productsPerPage = 6;
  const totalPages = Math.ceil(filteredProducts.length / productsPerPage);
  const currentProducts = filteredProducts.slice((currentPage - 1) * productsPerPage, currentPage * productsPerPage);
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    window.scrollTo(0, 0);
  };
  const handleCategoryChange = (category: string) => {
    setActiveCategory(category);
    setCurrentPage(1);
  };
  return <div className="w-full">
      {/* Hero section - 更适合的气候控制背景 */}
      <div className="relative w-full h-80 bg-cover bg-center" style={{
      backgroundImage: 'url("https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80")'
    }}>
        <div className="absolute inset-0 bg-black bg-opacity-40"></div>
        <div className="absolute inset-0 flex items-center">
          <div className="container mx-auto px-4">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
              Climate Control
            </h1>
            <p className="text-xl text-white max-w-xl">
              Create the perfect indoor environment with smart climate solutions
              for every season.
            </p>
          </div>
        </div>
      </div>
      {/* Filter tabs */}
      <FilterTabs categories={categories} activeCategory={activeCategory} onCategoryChange={handleCategoryChange} />
      {/* Featured products */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">
            Featured Climate Appliances
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {currentProducts.map(product => <div key={product.id} className="bg-[#f8f9fa] rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                <ImageWithLoader src={product.image} alt={product.name} className="w-full h-56 object-cover" />
                <div className="p-6">
                  <div className="mb-2">
                    <span className="bg-[#e9ecef] text-[#343a40] text-xs px-2 py-1 rounded">
                      {product.category}
                    </span>
                  </div>
                  <h3 className="font-bold text-xl mb-2">{product.name}</h3>
                  <p className="text-gray-600 mb-4">{product.description}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-xl font-semibold">
                      {product.price}
                    </span>
                    <Link to={`/product/${product.id}`} className="bg-[#d4a373] hover:bg-[#c99b6e] text-white px-4 py-2 rounded-md transition-colors">
                      View Details
                    </Link>
                  </div>
                </div>
              </div>)}
          </div>
          {/* Pagination */}
          {totalPages > 1 && <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} />}
        </div>
      </section>
      {/* Benefits section */}
      <section className="py-16 bg-[#e9ecef]">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-10 text-center">
            Benefits of Smart Climate Control
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-3">Enhanced Comfort</h3>
              <p className="text-gray-600">
                Intelligent systems that adapt to your preferences and maintain
                ideal conditions throughout your home.
              </p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-3">Energy Savings</h3>
              <p className="text-gray-600">
                Optimize energy usage with smart scheduling and occupancy
                detection to reduce utility bills.
              </p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-3">Air Quality</h3>
              <p className="text-gray-600">
                Advanced filtration and monitoring systems to ensure clean,
                healthy air in every room.
              </p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-3">Remote Control</h3>
              <p className="text-gray-600">
                Manage your home climate from anywhere with smartphone apps and
                voice control integration.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>;
}